<template>
  <div class="contactitem-container" :class="activeClass">
    <router-link v-if="isRouter" :to="{ name: href }">
      <Icon :type="icon" />
      <span>{{ text }}</span>
      <div class="layout-pop" v-if="showPop">
        <img src="https://p1.ssl.qhimgs1.com/t0451ca26e33ede0b71.jpg" alt="" />
      </div>
    </router-link>
    <a :href="href" v-else>
      <Icon :type="icon" /> 
      <span>{{ text }}</span>
      <div class="layout-pop" v-if="showPop">
        <img src="https://p1.ssl.qhimgs1.com/t0451ca26e33ede0b71.jpg" alt="" />
      </div>
    </a>
  </div>
</template>

<script>
import Icon from "@/components/Icon";
export default {
  name: "ContactItem",
  components: {
    Icon,
  },
  props: {
    icon: {
      type: String,
      requeired: true,
    },
    text: {
      type: String,
      requeired: true,
    },
    showPop: {
      type: Boolean,
      default: true,
    },
    href: {
      type: String,
      default: "javascript:;",
    },
    isRouter: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    activeClass() {
      if (this.href.toLowerCase().includes(["blog"])) {
        let chars = ["blog", "article"];
        let regex = new RegExp(chars.join("|"), "g"); // 使用|分隔每个字符，并设置全局标志g以匹配所有实例

        return regex.test(this.$route.path) ? "active" : "";
      } else if (this.href.toLowerCase() === "home") {
        return this.$route.path === "/home" ? "active" : "";
      } else {
        return this.$route.path.includes(this.href.toLowerCase())
          ? "active"
          : "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
.contactitem-container {
  width: 100%;
  height: 100%;
  color: @gray;
  font-size: 20px;
  display: flex;
  align-items: center;

  a {
    position: relative;
    padding-left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    &:hover .icon-container {
      color: @primary;
    }
    &:hover .layout-pop {
      transition: all 0.3s ease-in-out;
      transform: scaleY(1);
    }
  }
}

.layout-pop {
  position: absolute;
  width: 150px;
  aspect-ratio: 1;
  padding: 4px;
  background-color: white;
  border-radius: 8px;
  bottom: 35px;
  left: 8px;
  transform: scaleY(0);
  transform-origin: center bottom;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
    bottom: -8px;
    left: 18%;
  }
}
.icon-container {
  color: @gray;
  font-size: 32px;
}
</style>
